<template>
  <div class="vesselBox">
    <div class="search-wrap">
      <el-input v-model="keyword" clearable style="width:300px;" placeholder="交易编号" @clear="handleFilter" @keyup.enter.native="handleFilter"/>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button size="medium" type="info" @click="clearParams">清空</el-button>
    </div>
    <el-table
      :data="assetTableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      border
      class="assettable" style="width: 100%"
      ref="assetTableData"
    >
      <el-table-column prop="code" label="交易编号" align="center" min-width="150px;"/>
      <el-table-column prop="name" label="购买资产" align="center" min-width="100px;"/>
      <el-table-column prop="buyerName" label="购买者" align="center"/>
      <el-table-column prop="totalPrice" label="支付金额" align="center"/>
      <el-table-column prop="status" label="支付状态" align="center"/>
      <el-table-column prop="payType" label="支付类型" align="center" width="100px">
        <template slot-scope="scope">
          <span>{{ scope.row.payType | typeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTimeStr" label="创建时间" align="center"/>
      <el-table-column label="操作" align="center" min-width="100px">
        <template slot-scope="scope">
          <el-button type="danger" v-if="scope.row.status === '待支付'" size="small" @click="gopay(scope.row)">去支付</el-button>
          <el-button type="primary" size="small" @click="handleClick(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentpage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <!-- 详情弹框 -->
    <dis-dialog
      :visiabledialog="disDialog"
      :dialog-data="dialogData"
      @Visiable="closeDialog"
    />
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination' // 分页组件
  import DisDialog from './transactionDetail'
  import {getBscOrderDetailList, getBscOrderList} from '@/api/deal/order' // 数据接口
  import {getTenantId, getUserId, setPayUrl} from '@/utils/auth'

  export default {
    components: {
      Pagination,
      DisDialog
    },
    filters: {
      typeFilter(item) {
        const typeMap = {
          free: '免费',
          vxPay: '微信支付',
          alPay: '支付宝支付'
        };
        return typeMap[item]
      }
    },
    data() {
      return {
        total: 0,
        currentpage: 1,
        pagesize: 10,
        keyword: '',
        assetTableData: [],
        filterList: [],
        disDialog: false,
        dialogData: {}
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        getBscOrderList(getTenantId()).then(res => {
          res.data.items.map(item => {
            if (item.status === 'WAIT_BUYER_PAY') item.status = '待支付';
            if (item.status === 'TRADE_FINISHED') item.status = '交易成功';
            if (item.status === 'TRADE_CLOSED') item.status = '交易关闭';
            if (item.totalPrice) {
            } else {
              item.totalPrice = 0
            }
          });
          this.assetTableData = res.data.items;
          this.filterList = res.data.items;
          this.total = this.assetTableData.length
        })
      },
      handleClick(row) {
        getBscOrderDetailList(row.id).then(res => {
          this.dialogData = res.data;
          if (this.dialogData.payType === 'vxPay') this.dialogData.payType = '微信支付';
          if (this.dialogData.payType === 'free') this.dialogData.payType = '免费';
          if (this.dialogData.payType === 'alipay') this.dialogData.payType = '支付宝';
          this.disDialog = true
        })
      },
      gopay(row) {
        setPayUrl('/classpackage/assetstrade');
        // 支付页面跳转
        this.$router.push({
          name: 'Classpackage-pay',
          params: {
            'orderId': row.id
          }
        })

      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      closeDialog() {
        this.disDialog = false;
        this.dialogData = {}
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleFilter() {
        this.assetTableData = this.filterList.filter(item => {
          if (this.keyword && item.code.toString().toLowerCase().indexOf(this.keyword.toLowerCase()) === -1) return false;
          return true
        });
        this.total = this.assetTableData.length
      },
      clearParams() {
        this.keyword = '';
        this.getData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .vesselBox {
    padding: 20px;

    .search-wrap {
      margin-bottom: 20px;
    }

    .assettable {
      margin-bottom: 20px;
    }
  }
</style>
